import React, { Component } from 'react'
import classNames from 'classnames'
import { browserHistory } from 'react-router'
import { message } from 'antd'
import cookie from 'react-cookie'
import { isEmpty, isUndefined } from 'lodash/fp'

import Header from '../components/Header'
import Sidebar from '../components/Sidebar'
import Footer from '../components/Footer'
import '../../styles/core.scss'

class App extends Component {
  constructor (props, context) {
    super(props, context)
    this.eventCloseSidebar = this.eventCloseSidebar.bind(this)
    this.eventToggleSidebar = this.eventToggleSidebar.bind(this)
    this.setScrollTop = this.setScrollTop.bind()
    this.goBack = this.goBack.bind(this)
    this.wxSign = this.wxSign.bind(this)
    this.state = {
      sidebarOpen: false
    }
  }

  componentDidMount () {
    const { loginStatus } = this.props
    loginStatus()
    let ua = navigator.userAgent.toLowerCase()
    if(ua.match(/MicroMessenger/i)) {
      this.props.wechat(encodeURIComponent(window.location.href))
    }
  }

  componentWillReceiveProps (nextProps) {
    const { user } = nextProps
    const { signed, singout, isFetching } = user
    if (!isUndefined(signed) && !isUndefined(signed.result) && !isUndefined(signed.result.message) && !isUndefined(singout) && !isUndefined(singout.result) && !isUndefined(singout.result.data) && singout.result.status !== 0 && isFetching !== this.props.user.isFetching) {
      if (cookie.load('token')) {
        cookie.remove('token', { path: '/' })
        message.success('退出登录')
        this.context.router.push('/')
      }
    }
  }

  componentWillMount () {}

  componentWillUnmount () {}

  eventCloseSidebar (e) {
    if (this.state.sidebarOpen === true) {
      this.eventToggleSidebar(e)
    }
  }

  eventToggleSidebar (e) {
    e.preventDefault()
    this.setState({sidebarOpen: !this.state.sidebarOpen})
  }

  setScrollTop () {
    document.body.scrollTop = 0
  }

  goBack (e) {
    e.preventDefault()
    return browserHistory.goBack()
  }

  wxSign (info) {
    wx.config({
      debug: false,
      appId: info.app_id,
      timestamp: info.timestamp,
      nonceStr: info.nonce_str,
      signature: info.signature,
      jsApiList: [
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo'
      ]
    })
  }

  render () {
    const layoutClass = classNames('wrapper', {open: this.state.sidebarOpen})
    const { logout, user } = this.props
    const { signed } = user
    return (
      <div className={layoutClass}>
        <div className='back-top' onClick={this.setScrollTop} style={this.state.backTopVisible ? {display: 'block'} : {display: 'none'}}></div>
        <Sidebar eventToggleSidebar={this.eventToggleSidebar} logout={logout} signed={signed} singout={user.singout} />
        <div className='sidebar-mask' onClick={this.eventCloseSidebar}></div>
        <div className='wrap' id='wrap' onClick={this.eventCloseSidebar}>
          <Header faToggleSidebar={this.eventToggleSidebar} faGoBack={this.goBack} />
          <div className='container content'>
            {this.props.children}
          </div>
          { location.pathname.indexOf('/') < 0 && location.pathname.indexOf('/users/sign_in') < 0 && location.pathname.indexOf('/article') < 0 &&
            <Footer/>
          }
        </div>
      </div>
    )
  }
}

App.propTypes = {

}

App.contextTypes = {
  router: React.PropTypes.object.isRequired
}

export default App
